<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />
    <div class="container" v-loading.body="loading">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">功能管理</h1>
                <el-card class="box-card">
                    <el-form :inline="true" ref="search" :model="search" label-width="80px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="功能搜索">
                                    <el-input v-model="search.keyword" placeholder="名称/编码"></el-input>
                                </el-form-item>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <div style="text-align: right">
                                    <el-button type="primary" @click.native="getList">查询</el-button>
                                    <el-button type="primary" @click.native="clearSearch">清空查询条件</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
                <!--<el-button type="primary" style="margin: 10px 0" @click.native.prevent='add'>添加</el-button>-->
                <el-card class="box-card" style="margin-top: 10px">
                    <el-table
                            :data="functionList"
                            border
                            style="width: 100%">
                        <el-table-column
                                inline-template
                                label="序号"
                                width="80">
                            <div>{{ $index+pageSize*(currentPage-1)+1 }}</div>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="名称">
                        </el-table-column>
                        <el-table-column
                                prop="code"
                                label="编码">
                        </el-table-column>
                        <el-table-column
                                prop="desc"
                                label="功能描述">
                        </el-table-column>
                        <el-table-column
                                prop="isMenu"
                                :formatter="formatMenu"
                                label="是否菜单">
                        </el-table-column>
                        <!--<el-table-column-->
                                <!--align="center"-->
                                <!--label="操作"-->
                                <!--inline-template>-->
                            <!--<div style="margin-left: -10px;">-->
                                <!--<el-dropdown>-->
                                    <!--<el-button size="small" type="primary">-->
                                        <!--操作<i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i>-->
                                    <!--</el-button>-->
                                    <!--<el-dropdown-menu slot="dropdown" align="center">-->
                                        <!--<el-dropdown-item><el-button size="mini" type="primary" @click.native="edit(row, true)" @click="resetForm('form')">编辑</el-button></el-dropdown-item>-->
                                        <!--<el-dropdown-item><el-button size="mini" type="primary" @click.native="confirmDelete(row.id)">删除</el-button></el-dropdown-item>-->
                                    <!--</el-dropdown-menu>-->
                                <!--</el-dropdown>-->
                            <!--</div>-->
                        <!--</el-table-column>-->
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount"
                            style="margin-top: 10px;">
                    </el-pagination>
                </el-card>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

    <el-dialog :title="dialogTitle" v-model="dialogFormVisible">
        <el-card class="box-card">
            <el-form :model="form" ref= 'form':rules="functionRules" label-width="100px">
                <el-form-item prop="name" label="功能名称">
                    <el-input v-model="form.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item prop="code" label="功能编码">
                    <el-input v-model="form.code" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="是否菜单">
                    <el-switch on-text="" off-text="" v-model="form.isMenu"></el-switch>
                </el-form-item>
                <el-form-item label="功能描述">
                    <el-input type="textarea" v-model="form.desc" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirmSave" v-if="!readonly">保 存</el-button>
            <el-button type="primary" @click="confirmEdit" v-else>保 存</el-button>
        </div>
    </el-dialog>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入列表数据 -->
<script src="/static/js/dist/list.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>

<!-- 引入vue组件 -->
<script src="/static/js/dist/vueComponents.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                loading: false,
                formLabelWidth: '100px',
                dialogFormVisible: false,
                dialogTitle: '添加功能',
                readonly: false,
                form: {
                    name: '',
                    code: '',
                    isMenu: false,
                    desc: ''
                },
                functionRules:{
                    name:[
                        {required:true,message:'功能名称必填',trigger:'blur'}
                    ],
                    code:[
                        {required:true,message:'功能编码必填',trigger:'blur'}
                    ]
                },
                search: {
                    keyword: ''
                },
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                functionList: []
            }
        },
        mounted: function () {
            this.getList();
        },
        methods: {
            handleCurrentPageChange(val) {
                this.currentPage = val;
                this.getList();
                this.getList()
            },
            getList () {
                let that = this;
                this.http('/function/list', {currentPage: this.currentPage, name: this.search.keyword, pageSize: this.pageSize}, function (res) {
                    if (res.status === 200) {
                        that.functionList = res.data.list;
                        that.totalCount = res.data.total;
                    } else {
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            clearSearch () {
                this.search.keyword = "";
                this.currentPage = 1
                this.getList();
            },
            clearForm () {
                this.dialogFormVisible = false
                this.form = {
                    name: '',
                    code: '',
                    isMenu: false,
                    desc: ''
                }
                this.dialogTitle = "添加功能";
                this.readonly = false;
            },
            confirmSave () {
                let that = this;
                let obj = {}
                let isValid = true
                if(this.form.name === ''||this.form.code === ''){
                    this.$refs.form.validate(function (valid) {
                        if(!valid){
                            that.$message.error('请完成必填项');
                            isValid = false;
                        }
                    })
                }else{
                    if (this.form.isMenu) {
                        obj = {
                            name: this.form.name,
                            code: this.form.code,
                            isMenu: 1,
                            desc: this.form.desc
                        }
                    } else {
                        obj = {
                            name: this.form.name,
                            code: this.form.code,
                            isMenu: 0,
                            desc: this.form.desc
                        }
                    }
                    this.http("/function/add", obj, function (res) {
                        if (res.status === 200) {
                            that.clearForm();
                            that.$alert('添加成功', '提示', {
                                confirmButtonText: '确定'
                            });
                            that.getList();
                        } else {
                            that.$alert('添加失败', '提示', {
                                confirmButtonText: '确定'
                            });
                        }
                    }, function (res) {
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定'
                        });
                    })
                }
            },
            edit (row, readonly) {
                this.dialogTitle = '编辑功能';
                this.readonly = readonly;
                if (row.isMenu === 0) {
                    this.form = {
                        id: row.id,
                        name: row.name,
                        code: row.code,
                        isMenu: false,
                        desc: row.desc
                    }
                } else {
                    this.form = {
                        id: row.id,
                        name: row.name,
                        code: row.code,
                        isMenu: true,
                        desc: row.desc
                    }
                }
                this.dialogFormVisible = true;
            },
            confirmEdit () {
                let that = this;
                let obj = {};
                if(this.form.name === ''||this.form.code === ''){
                    this.$refs.form.validate(function (valid) {
                    })
                    return false;
                }else{
                    if (this.form.isMenu) {
                        obj = {
                            id: this.form.id,
                            name: this.form.name,
                            code: this.form.code,
                            isMenu: 1,
                            desc: this.form.desc
                        }
                    } else {
                        obj = {
                            id: this.form.id,
                            name: this.form.name,
                            code: this.form.code,
                            isMenu: 0,
                            desc: this.form.desc
                        }
                    }
                }
                this.http("/function/update", obj, function (res) {
                    if (res.status === 200) {
                        that.clearForm();
                        that.$alert('编辑成功', '提示', {
                            confirmButtonText: '确定'
                        });
                        that.getList();
                    } else {
                        that.$alert('编辑失败', '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            confirmDelete(id){
                let that = this;
                this.$confirm('此操作将永久删除该项, 是否继续?', '提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(function () {
                    that.deleteFunction(id)
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            deleteFunction (id) {
                let that = this;
                let obj = {
                    id: id
                }
                this.http("/function/delete", obj, function (res) {
                    if (res.status === 200) {
                        that.$alert('删除成功', '提示', {
                            confirmButtonText: '确定'
                        });
                        that.getList();
                        that.clearForm();
                    } else {
                        that.$alert('删除失败', '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    that.$alert('删除失败', '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            formatMenu (row, column) {
                if (row.isMenu === 0) {
                    return '否'
                } else {
                    return '是'
                }
            },
            add(){
                this.form = {
                    name: '',
                    code: '',
                    isMenu: false,
                    desc: ''
                }
                this.dialogTitle = "添加功能";
                this.dialogFormVisible = true;
                this.readonly = false;
            },
            cancel(){
              this.dialogFormVisible = false;
                this.$refs.form.resetFields();
            }
        }
    })
</script>

<style>
    .el-table__empty-block {
        position: relative;
        min-height: 60px;
        text-align: center;
        width: 100%;
        height: auto;
    }
    #app {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
</style>

<!-- 20170105 --></body>
</html>